<template>
  <div v-if="isTrue">
    <el-form
      :model="form"
      :rules="rules"
      ref="basicInfo"
      label-width="160px"
      class="ccui-form"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="冲销原因：" prop="writeoffReason">
            <el-input
              class="remarkClass"
              resize="both"
              type="textarea"
              :rows="5"
              placeholder="请输入冲销原因"
              maxlength="500"
              show-word-limit
              v-model="form.writeoffReason"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="填报单位：" prop="reportInOrgId">
            <el-select
              v-model="form.reportInOrgId"
              placeholder="请选择填报单位"
              @change="changeReportInOrgId"
            >
              <!--                        :disabled="form.commonBool"-->
              <el-option
                v-for="item in reportOptions"
                :key="item.orgId"
                :label="item.name"
                :value="item.orgId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="仓库：" prop="warehouseName">
            <el-input v-model="form.warehouseName" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="出库单编号：" prop="exwarehouseCode">
            <el-input
              v-model="form.exwarehouseCode"
              placeholder="请选择出库单编号"
              disabled
            />
            <el-button plain type="single-number" @click="clickExwareHouseCode"
              >选择
            </el-button>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="分类名称：" prop="categoryName">
            <el-input v-model="form.categoryName" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="冲销单编号：" prop="writeoffCode">
            <el-input v-model="form.writeoffCode" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="冲销单名称：" prop="writeoffName">
            <el-input v-model="form.writeoffName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="冲销数量：" prop="exwarehouseCount">
            <el-input v-model="form.exwarehouseCount" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="冲销金额：" prop="exwarehouseMoney">
            <el-input v-model="form.exwarehouseMoney" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="编制日期：" prop="reportTime">
            <el-input v-model="form.reportTime" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="编制人：" prop="reportUsername">
            <el-input v-model="form.reportUsername" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注：" prop="remark">
            <el-input
              class="remarkClass"
              resize="both"
              type="textarea"
              :rows="5"
              placeholder="请输入备注"
              maxlength="500"
              show-word-limit
              v-model="form.remark"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <chooseRadioDialog
      ref="chooseRadioDialog"
      :dialogData="dialogData"
      @search="search"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @change="change"
    />
  </div>
</template>

<script>
import chooseRadioDialog from "@/app/financial/financialOutbound/components/chooseRadioDialog";
import {
  getUserInfo,
  getReportInOrgData,
  listPageForeignExwarehouse,
  getExwarehouse
} from "../api";
import { addUrlPerFix, dateFormat1 } from "@/basa/utils";
import js from "../js";

export default {
  name: "basicInfo",
  components: { chooseRadioDialog },
  data() {
    return {
      isTrue: false,
      form: {
        writeoffReason: "", // 冲销原因
        reportInOrgId: null, // 填报单位ID
        reportInOrgCode: "", // 填报单位Code
        reportInOrgName: "", // 填报单位NAME
        reportOrgDeptId: null, // 填报单位部门ID
        reportInDeptCode: "", // 填报单位部门CODE
        reportOrgDeptName: "", // 填报单位NAME
        warehouseName: "", // 仓库
        warehouseId: "", // 仓库Id
        exwarehouseCode: "", // 出库单编号
        categoryName: "", // 分类名称
        writeoffCode: "", // 冲销单编号
        writeoffName: "", // 冲销单名称
        exwarehouseCount: "", // 冲销数量
        exwarehouseMoney: "", // 冲销金额
        reportTime: "", // 编制日期
        reportUsername: "", // 编制人
        reportOpenid: null, // 编制人ID
        remark: "" // 备注
      },
      rules: {
        writeoffReason: [{ required: true, message: "请输入冲销原因" }],
        reportInOrgId: [{ required: true, message: "请选择填报单位" }],
        exwarehouseCode: [{ required: true, message: "请选择出库单编号" }],
        writeoffName: [{ required: true, message: "请输入冲销单名称" }]
      },
      reportOptions: [],
      dialogData: js.dialogData
    };
  },
  created() {
    this.getUserInfo();
    this.$bus.$on("getSure", row => {
      let params = {
        id: row.id
      };
      this.getList(params);
    });
  },
  methods: {
    getList(params) {
      getExwarehouse(params).then(res => {
        let result = res.data.data;
        this.handleParamsForm(result.exwarehouseBO);
        this.$bus.$emit("getTableData", result.exwarehouseBOList);
      });
    },
    change(data) {
      this.$refs["chooseRadioDialog"].formData = {};
      this.dialogData.formDataSearch = {};
    },
    search(data) {
      for (let prop in data) {
        this.$set(data, prop, data[prop].replace(/(^\s*)|(\s*)$/g, ""));
      }
      this.dialogData.pagination.pageNoCode = 1;
      this.dialogData.formDataSearch = Object.assign({}, data);
      this.listPageForeignExwarehouse(this.dialogData.formDataSearch);
    },
    handleSizeChange(val) {
      console.log(
        val,
        "handleSizeChange",
        this.dialogData.tableData.length,
        "dialogData.tableData.length"
      );
      this.dialogData.pagination.pageSizeCode = val;
      this.listPageForeignExwarehouse(this.dialogData.formDataSearch);
    },
    handleCurrentChange(val) {
      // 跳转翻页都会调这个方法
      this.dialogData.pagination.pageNoCode = val;
      this.listPageForeignExwarehouse(this.dialogData.formDataSearch);
    },
    handleSubmit() {
      return new Promise((resolve, reject) => {
        this.$refs["basicInfo"].validate(valid => {
          if (valid) {
            resolve(this.form);
          } else {
            this.$message.error("有必填项未填写");
            // reject("a");
          }
        });
      });
    },

    handleParamsForm(r) {
      if (this.$route.params.id) this.form.id = r.id;

      this.form = Object.assign(this.form, {
        exwarehouseId: r.id,
        exwarehouseName: r.exwarehouseName,
        categoryCode: r.categoryCode
      });
      let arr = [
        "exwarehouseCode",
        "categoryName",
        "warehouseName",
        "warehouseId",
        "exwarehouseCount",
        "exwarehouseMoney",
        "remark"
      ];

      arr.forEach(e => {
        this.form[e] = r[e];
      });
      this.form.exwarehouseCount = (
        0 - Math.abs(this.form.exwarehouseCount)
      ).toFixed(3);
      this.form.exwarehouseMoney = (
        0 - Math.abs(this.form.exwarehouseMoney)
      ).toFixed(2);
    },

    // 填报单位切换
    changeReportInOrgId(val) {
      let result = this.reportOptions.find(e => e.orgId === val);
      this.form.reportInOrgId = result.orgId;
      this.form.reportInOrgCode = result.code;
      this.form.reportInOrgName = result.name;

      let arr = [
        "exwarehouseCode",
        "categoryName",
        "warehouseName",
        "exwarehouseCount",
        "exwarehouseMoney"
      ];
      arr.forEach(e => {
        this.form[e] = "";
      });

      this.$nextTick(() => {
        this.$refs["basicInfo"].clearValidate();
      });

      this.$bus.$emit("clearTable");
    },

    // 控制弹框展示
    clickExwareHouseCode() {
      this.$refs["chooseRadioDialog"].dialogVisible = true;
      this.listPageForeignExwarehouse();
    },

    // 获取登录信息
    getUserInfo() {
      getUserInfo(
        addUrlPerFix(process.env.VUE_APP_BASEP_URL) + "/apis/basap/getUserInfo",
        {}
      ).then(res => {
        let result = res.data.data.userInfo;
        this.form.reportUsername = result.name;
        this.form.reportOpenid = result.openId;
        this.form.reportTime = dateFormat1(new Date());

        this.getReportInOrgData(result.openId);
      });
    },

    // 填报单位
    getReportInOrgData(id) {
      getReportInOrgData({ openIds: [id], isShowLoading: true }).then(res => {
        this.reportOptions = res.data.data[id];
        this.form.reportInOrgId = this.reportOptions[0].orgId;
        this.form.reportInOrgCode = this.reportOptions[0].code;
        this.form.reportInOrgName = this.reportOptions[0].name;

        this.isTrue = true;
      });
    },

    // 出库单编号数据
    listPageForeignExwarehouse(obj) {
      let params = {
        reportInOrgId: this.form.reportInOrgId,
        pageNo: this.dialogData.pagination.pageNoCode,
        pageSize: this.dialogData.pagination.pageSizeCode
      };
      params = obj ? { ...params, ...obj } : params;

      listPageForeignExwarehouse(params).then(res => {
        let result = res.data.data;
        result.rows.forEach(e => {
          e.reportTime = e.reportTime ? e.reportTime.substr(0, 10) : "";
          e.exwarehouseCount = e.exwarehouseCount
            ? (+e.exwarehouseCount).toFixed(3)
            : "";
          e.exwarehouseMoney = e.exwarehouseMoney
            ? (+e.exwarehouseMoney).toFixed(2)
            : "";
        });
        this.dialogData.tableData = result.rows;
        this.dialogData.pagination.totalNum = result.recordsTotal;
        this.dialogData.pagination.pageNoCode = result.pageNo;
      });
    }
  },
  destroyed() {
    this.$bus.$off("getSure");
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-input {
  width: 260px;
}

/deep/ .el-button--single-number {
  width: 46px;
  margin-left: 10px;
  padding: 0 9px;
}

.remarkClass {
  width: calc(50% + 343px);
}
</style>
